<template>
    <div id="vaccine">
        <div class="vaccine-catVaccines-dogVaccines">
            <el-switch class="vaccine-c_d-switch" v-model="showType" active-color="#13ce66" inactive-color="#ff4949"
                active-text="猫咪" inactive-text="狗狗">
            </el-switch>
            <el-collapse v-model="activeNames">
                <!-- 后续换成ID作为key -->
                <el-collapse-item v-for="item in showList" :name="item.name" :key="item.name" style="margin: 0px;">
                    <template slot="title">
                        <div style="flex: 1; font-size: 16px;">{{ item.name }}</div>
                    </template>
                    <div class="vaccine-c_d-collapse-body">
                        <div class="vaccine-c_d-collapse-b-text" v-if="item.introduction">
                            <span class="accine-c_d-collapse-b-t-header">疫苗介绍：</span>
                            <span>{{ item.introduction }}</span>
                        </div>
                        <div class="vaccine-c_d-collapse-b-text" v-if="item.function">
                            <span class="accine-c_d-collapse-b-t-header">疫苗作用：</span>
                            <span> {{ item.function }}</span>
                        </div>
                        <div class="vaccine-c_d-collapse-b-text" v-if="item.suggestedAge">
                            <span class="accine-c_d-collapse-b-t-header">疫苗接种时间：</span>
                            <span>{{ item.suggestedAge }}</span>
                        </div>
                        <div class="vaccine-c_d-collapse-b-text" v-if="item.adverseReaction">
                            <span class="accine-c_d-collapse-b-t-header">不良反应：</span>
                            <span> {{ item.adverseReaction }}</span>
                        </div>
                        <div class="vaccine-c_d-collapse-b-text" v-if="item.countermeasures">
                            <span class="accine-c_d-collapse-b-t-header">应对方法：</span>
                            <span> {{ item.countermeasures }}</span>
                        </div>
                    </div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'vaccine',
        data() {
            return {
                showType: false,
                showList: [],
                activeNames: [],
                catVaccines: [
                    {
                        name: "猫三联疫苗",
                        introduction: "预防猫传染性腹泻、猫瘟和猫鼻气管炎。",
                        function: "保护猫咪免受猫传染性腹泻、猫瘟和猫鼻气管炎的感染。",
                        suggestedAge: "3个月以上",
                        adverseReaction: "可能出现发烧、食欲不振和乏力等反应。",
                        countermeasures: "接种后应观察猫咪身体反应，并根据兽医建议进行处理。",
                        type: 0
                    },
                    {
                        name: "猫五联疫苗",
                        introduction: "预防猫传染性腹泻、猫瘟、猫鼻气管炎、鼻炎病毒和钩虫感染。",
                        function: "比猫三联疫苗多预防了鼻炎病毒和钩虫感染。",
                        suggestedAge: "4个月以上",
                        adverseReaction: "可能出现发烧、食欲不振和乏力等反应。",
                        countermeasures: "接种后应观察猫咪身体反应，并根据兽医建议进行处理。",
                        type: 0
                    },
                    {
                        name: "狂犬疫苗",
                        introduction: "预防猫感染狂犬病。",
                        function: "保护猫咪免受狂犬病的感染。",
                        suggestedAge: "3个月以上，建议每年接种1-2次。",
                        adverseReaction: "可能出现发烧、食欲不振和乏力等反应。",
                        countermeasures: "接种疫苗后应尽量避免猫咪淋雨或接触可能存在狂犬病毒的动物，同时观察猫咪身体反应，并根据兽医建议进行处理。",
                        type: 0
                    }
                ],
                dogVaccines: [
                    {
                        name: "犬五联疫苗",
                        introduction: "预防犬细小病毒、犬腺病毒2型、犬瘟、犬传染性肝炎和副流感。",
                        function: "强化狗狗免疫力，预防上述疾病。",
                        suggestedAge: "2-3个月龄开始接种，每隔1-2个月接种一次，共计3-4针。",
                        adverseReaction: "可能出现发热、食欲不振、注射部位红肿等轻微反应。",
                        countermeasures: "接种后应观察狗狗身体反应，并根据兽医建议进行处理。",
                        type: 1
                    },
                    {
                        name: "狂犬疫苗",
                        introduction: "预防狗狗感染狂犬病。",
                        function: "保护狗狗免受狂犬病的侵害。",
                        suggestedAge: "狗狗三个月龄以上，第一年接种1-2次，之后每年都需要接种。",
                        adverseReaction: "可能出现发热、食欲不振和乏力等反应。",
                        countermeasures: "疫苗接种后，建议避免狗狗夜间外出散步、游荡，同时观察狗狗身体反应，并根据兽医建议进行处理。",
                        type: 1
                    },
                    {
                        name: "犬十二联疫苗",
                        introduction: "预防犬细小病毒、犬腺病毒2型、犬瘟、副流感、传染性肝炎、硬皮症、布氏杆菌病、伤寒、钩端螺旋体病、弓形体病、新城疫和人类流感A/B。",
                        function: "比犬五联疫苗多预防了伤寒、布氏杆菌病、硬皮症等疾病。",
                        suggestedAge: "与犬五联疫苗相同",
                        adverseReaction: "可能出现发热、食欲不振、注射部位红肿等轻微反应。",
                        countermeasures: "接种后应观察狗狗身体反应，并根据兽医建议进行处理。",
                        type: 1
                    }
                ]
            }
        },
        watch: {
            showType: {
                immediate: true,
                handler(newVal) {
                    if (newVal) {
                        this.showList = this.catVaccines
                    } else {
                        this.showList = this.dogVaccines
                    }
                    this.activeNames = []
                }
            }
        },
        methods: {
        }
    }
</script>

<style scoped lang="less">
    #vaccine {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;

        .vaccine-catVaccines-dogVaccines {
            width: 70%;
            margin: 10px 5%;
            box-shadow: 0px -5px 5px var(--main-box-shadow-color), 5px 0px 5px var(--main-box-shadow-color), 0px 5px 5px var(--main-box-shadow-color), -5px 0px 5px var(--main-box-shadow-color);
            border: 1px solid var(--main-box-shadow-color);

            .vaccine-c_d-switch {
                display: flex;
                width: 100%;
                height: 50px;
                font-size: 20px;
                justify-content: center;
            }

            .vaccine-c_d-collapse-body {
                text-align: left;

                .vaccine-c_d-collapse-b-text {
                    font-size: 14px;
                    vertical-align: middle;
                    margin: 5px;
                    margin-left: 50px;
                    border-top: 1px solid rgba(240, 240, 240, 1);

                    .accine-c_d-collapse-b-t-header {
                        display: inline-block;
                        width: 100px;
                        text-align: right;
                    }
                }
            }
        }
    }
</style>